<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const data = ref([
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
]);
// const color = ref(['#19A8EF', '#7C5BEE', '#EEBF1B']);
const color = ref(['#67C23A', '#E6A23C', '#ff0000']);
const seriesNames = ref(['已完成', '已终止', '执行失败']);

onMounted(() => {
  renderEcharts({
    color: color.value,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: '10%',
      padding: [20, 10],
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    // legend: {
    //   data: seriesNames.value,
    // },
    grid: {
      top: '10%',
      left: '1%',
      right: '25%',
      bottom: '10%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: '#fff', // 这里设置颜色，比如白色
          fontSize: 12, // 可选，设置字体大小
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#fff', // 这里设置颜色，比如白色
          fontSize: 12, // 可选，设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#022627',
          },
        },
      },
    ],
    series: data.value.map((item, index) => ({
      name: seriesNames.value[index],
      type: 'bar',
      stack: '总量',
      barWidth: '38%', // 设置柱状图宽度为40%
      emphasis: {
        focus: 'series',
      },
      data: item,
    })),
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" style="height: 100%" />
</template>
